﻿@section JavaScript {
  <script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>
}
<p>
  KangaModeling is an open source project <a href="http://kangamodeling.codeplex.com">
    hosted at CodePlex</a> that makes it super simple to create good looking modeling
  diagrams with as little overhead as possible using a lightweight, human-readable
  and powerful markup language. Use it on your blog, wiki or website to visualize
  interactions or relationships with small effort and huge effect.
</p>
<h2>
  Playground
</h2>
<p>
  Just type code in the text area below and the diagram will update as you type.
</p>
<table>
  <tr>
    <td valign="top" style="width: 25%">
      <label>
        Style:
      </label>
      <br />
      <select id="style">
        <option>sketchy</option>
        <option>classic</option>
      </select>
      <br />
      <label>
        Source:
      </label>
      <br />
        <textarea rows="15" cols="45" id="source">
title Withdrawal

Customer-&gt;ATM: withdraw(account, amount)
activate ATM
ATM-&gt;Bank: getBalance(account)
activate Bank
Bank--&gt;ATM: balance
deactivate Bank
alt amount > balance
ATM-&gt;Customer: insufficientBalance
else amount <= balance
ATM-&gt;Bank: debit(account, amount)
end
ATM-&gt;Customer: cash(amount)
deactivate ATM
        </textarea>
      <br />
      <label>
        Errors:
      </label>
      <br />
      <ul id="errors">
      </ul>
    </td>
    <td valign="top">
      <img id="diagram" src="" />
    </td>
  </tr>
</table>
<hr />
<h2>
  Documentation
</h2>
<p>
  A complete <a href="http://kangamodeling.codeplex.com/documentation">markup documentation
    is available at CodePlex</a>.
</p>
<hr />
<h2>
  Usage
</h2>
<p>
  Currently there are three ways to use KangaModeling:
</p>
<ol>
  <li>
    <p>
      <b>Use the public web API</b>
    </p>
    <p>
      The public web API is available at <a href="http://kangamodeling.org/api">http://kangamodeling.org/api</a>.
    </p>
    <p>
      <b>Set up</b>
    </p>
    <p>
      A JavaScript client for the web API can be retrieved from <a href="http://kangamodeling.org/api/js">
        http://kangamodeling.org/api/js</a>. Just reference this to get the entire functionality
      on your site.
    </p>
    <pre class="brush: html">
 &lt;script type=&quot;text/javascript&quot; src=&quot;http://kangamodeling.org/api/js&quot; /&gt;
      </pre>
    The JS client uses jQuery, so you additionally need to reference it, for example
    from the jQuery CDN.
    <pre class="brush: html">
 &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.7.2.min.js&quot; /&gt;
      </pre>
    <p>
      <b>Functionality</b>
    </p>
    <p>
      When you include the JS client it will automatically perform a diagram conversion
      as soon as the DOM is ready.
    </p>
    <p>
      To let the automatic diagram conversion happen place your markup code on any HTML
      page that references the JS client and surround it with a <tt>&lt;pre&gt;</tt> tag.
      The JS client looks for all <tt>pre</tt> elements with its <tt>class</tt> attribute
      set to <tt>kanga</tt>. To tell the JS client what type of diagram it should produce,
      set the <tt>data-kanga-type</tt> attribute to the approriate diagram type (currently,
      the only valid value is <tt>sequence</tt>). To tell the JS client how it should
      render the diagram set the <tt>data-kanga-style</tt> attribute to the diagram style
      of your choice (currently, valid values are <tt>sketchy</tt> and <tt>classic</tt>).
    </p>
    <p>
      Putting it all together your HTML has to look like this:
    </p>
    <pre class="brush: html">
&lt;pre class=&quot;kanga&quot; data-kanga-type=&quot;sequence&quot; data-kanga-style=&quot;sketchy&quot;&gt
    title Hello World 
    Alice-&gt;Bob: Hi! 
    activate Bob 
    Bob--&gt;Alice: Hey! 
    deactivate Bob 
&lt;/pre&gt;
</pre>
    <p>
      Which when converted by the JS client will be replaced by the appropriate visual
      representation:
    </p>
    <pre class="kanga" data-kanga-type="sequence" data-kanga-style="sketchy">
    title Hello World 
    Alice-&gt;Bob: Hi!
    activate Bob
    Bob--&gt;Alice: Hey! 
    deactivate Bob
</pre>
  </li>
  <li>
    <p>
      <b>Use the self-hosted Kanga Web API</b>
    </p>
    <p>
      The project <tt>KangaModeling.Web.Api</tt> compiles to an ASP.NET MVC3 application
      that can easily be published to the IIS of your choice. This is the best choice
      if you want a stable and secure API under your control.
    </p>
    <p>
      All the guidelines mentioned above apply to the self-hosted Kanga Web API.
    </p>
  </li>
  <li>
    <p>
      <b>Use the Kanga Executables.</b>
    </p>
    <p>
      The projects <tt>KangaModeling.GuiRunner</tt> and <tt>KangaModeling.ConsoleRunner</tt>
      both compile to windows executables you can use on your local machine.
    </p>
    <p>
    </p>
  </li>
</ol>
<hr />
<h2>
  Contributions
</h2>
<p>
  Feel free to <a href="http://kangamodeling.codeplex.com">contribute to the project
    via CodePlex</a>. Besides <a href="http://kangamodeling.codeplex.com/SourceControl/list/changesets">
      code contributions</a> we greatly appreciate entries to the <a href="http://kangamodeling.codeplex.com/discussions">
        discussion list</a> and the <a href="http://kangamodeling.codeplex.com/workitem/list/basic">
          issue tracker</a>.
</p>
<hr />
<h2>
  Sponsors
</h2>
<p>
  Thanks to our sponsors for their efforts to support KangaModeling and open source
  software in general.
</p>
<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.discountasp.net">
          <img src="http://i3.codeplex.com/Download?ProjectName=KangaModeling&amp;DownloadId=377938"
            alt="DiscountASP.NET" title="DiscountASP.NET" /></a>
      </td>
    </tr>
    <tr>
      <td>
        Thanks to <a href="http://www.discountasp.net">DiscountASP.NET</a> for providing
        free ASP.NET hosting for our site.
      </td>
    </tr>
    <tr>
      <td>
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.jetbrains.com">
          <img src="http://i3.codeplex.com/Download?ProjectName=KangaModeling&amp;DownloadId=377937"
            alt="JetBrains ReSharper" title="JetBrains ReSharper"></a>
      </td>
    </tr>
    <tr>
      <td>
        Thanks to <a href="http://www.jetbrains.com/">JetBrains</a> for providing free ReSharper
        licenses for our project members.
      </td>
    </tr>
  </tbody>
</table>
